<template>
  <dw-page-warpper>
    <DragCol ref="dragColRef" height="100%" width="100%" :leftPercent="20" :sliderWidth="8" sliderBgColor="#e6ecf5" sliderBgHoverColor="#e6ecf5">
      <template #left>
        <category-tree @currentNodeChange="currentNodeChange"></category-tree>
      </template>
      <template #right>
        <label-form-grid ref="labelRef" @handleSelect="handleSelect"></label-form-grid>
      </template>
    </DragCol>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { DragCol } from '@/components/vue-resizer';
import { ref } from 'vue';
import type { ILabelCategory } from './tag';
import LabelFormGrid from './components/tag.vue';
import CategoryTree from './components/category.vue';
defineOptions({
  name: 'SysTag',
});

const labelRef = ref();
const currentNodeChange = (nodeData: ILabelCategory, isEdit: boolean) => {
  if (isEdit) {
    labelRef.value.setCategoryCode(nodeData.categoryCode);
  } else {
    labelRef.value.loadData(nodeData.categoryCode);
  }
};
const dragColRef = ref();
const handleSelect = (newValue: string) => {
  if (newValue != 'datagrid') {
    dragColRef.value.hiddenLeft();
  } else {
    dragColRef.value.showLeft();
  }
};
</script>

<style lang="scss" scoped>
.color-picker {
  :deep(.el-input-group__append, .el-input-group__prepend) {
    padding: 0;
  }
}
</style>
